<template>
  <div>
    <div class="search">
      <el-input placeholder="请输入广告标题查询" style="width: 200px" v-model="title"></el-input>
      <el-select v-model="status" placeholder="请选择展示状态" style="margin-left: 10px">
        <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="type" placeholder="请选择广告类型" style="margin-left: 10px">
        <el-option
            v-for="item in options"
            :key="item.type"
            :label="item.label"
            :value="item.type">
        </el-option>
      </el-select>
      <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
    </div>

    <div class="operation">
      <el-button type="primary" plain @click="handleAdd">新增</el-button>
    </div>

    <div class="table">
      <el-table :data="tableData" strip @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="序号" width="70" align="center" sortable>
          <template #default="{ row, $index }">
            {{ $index + 1 }} <!-- 这里是序号从1开始 -->
          </template>
        </el-table-column>
        <el-table-column label="图片" width="100">
          <template v-slot="scope">
            <div style="display: flex; align-items: center">
              <el-image style="width: 60px; height: 60px; border-radius: 80%"
                        :src="scope.row.imageUrl || defaultImageUrl"
                        :preview-src-list="[scope.row.imageUrl || defaultPreviewUrl]"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="广告标题"></el-table-column>
        <el-table-column prop="content" label="广告内容"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="125"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="125"></el-table-column>
        <el-table-column prop="remarks" label="备注"></el-table-column>
        <el-table-column label="是否展示" align="center" width="100">
          <template v-slot="scope">
            <el-switch
                v-model="scope.row.status"
                :active-value="0"
                :inactive-value="1"
                @change="updateStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" width="125">
          <template v-slot="scope">
            <el-select v-model="scope.row.type" filterable placeholder="请选择" @change="handleTypeChange(scope.row)">
              <el-option
                  v-for="item in options"
                  :key="item.type"
                  :label="item.label"
                  :value="item.type">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" width="125"></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template v-slot="scope">
            <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" plain @click="del(scope.row.id)"  v-if="scope.row.username != 'admin'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </div>


    <el-dialog title="广告" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close @close="handleCancel">
      <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
        <el-form-item label="广告标题" prop="title">
          <el-input v-model="form.title" placeholder="广告标题"></el-input>
        </el-form-item>
        <el-form-item label="广告内容" prop="content">
          <el-input v-model="form.content" placeholder="广告内容"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
              v-model="form.startTime"
              type="datetime"
              placeholder="选择开始时间"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
              v-model="form.endTime"
              type="datetime"
              placeholder="选择结束时间"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="form.type" filterable placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.type"
                :label="item.label"
                :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" placeholder="备注"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="avatar-uploader"
              :action="$baseUrl + '/admin/api/photo/upload'"
              :headers="{ authentication: user.token }"
              :data="{ imageType: 'AVATAR'}"
              list-type="picture"
              :on-success="handleAvatarSuccess"
              :file-list="fileList"
              :on-remove="handleRemove"
          >
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fromVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
export default {
  name: "Admin",
  data() {
    return {

      //默认图片
      defaultImageUrl: 'https://img0.baidu.com/it/u=2991630058,871933297&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300',
      //默认预览
      defaultPreviewUrl: 'https://img0.baidu.com/it/u=2594677340,3536341249&fm=253&fmt=auto&app=138&f=JPG?w=240&h=240',
      tableData: [],  // 所有的数据
      fileList: [], // 用于存储上传的文件列表
      options: [{
        type: 0,
        label: '轮播图'
      }, {
        type: 1,
        label: '平铺'
      }],
      statusOptions: [ // 修改statusOptions为下拉列表选项
        { value: 0, label: '展示' },
        { value: 1, label: '不展示' }
      ],
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 0,
      role: null,
      title: null,
      type: null,
      status: null,
      fromVisible: false,
      form: {},
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      rules: {

        title: [
          { required: true, message: '请输入广告标题', trigger: 'blur' },
          { max: 20, message: '广告标题不能超过20个字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入广告内容', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' },
          { validator: this.validateStartTime, trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' },
          { validator: this.validateEndTime, trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择广告类型', trigger: 'change' }
        ],
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ]
      },
      ids: []
    }
  },
  created() {
    this.load(1)
  },
  methods: {
    validateStartTime(rule, value, callback) {
      if (value && this.form.endTime && new Date(value) >= new Date(this.form.endTime)) {
        callback(new Error('开始时间必须小于结束时间'));
      } else {
        callback();
      }
    },
    validateEndTime(rule, value, callback) {
      if (value && this.form.startTime && new Date(value) <= new Date(this.form.startTime)) {
        callback(new Error('结束时间必须大于开始时间'));
      } else {
        callback();
      }
    },
    handleTypeChange(row) {
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.fileList = this.form.imageUrl ? [{name: 'current-image', url: this.form.imageUrl}] : []
      // 这里可以添加任何逻辑来处理类型更改
      // 例如，你可以在这里发起一个请求来更新类型
      this.$request.put('/admin/api/activity/update', {
        id: row.id,
        type: row.type,
        imageUrl: this.fileList.length > 0 ? this.fileList[0].url : null // 只发送第一张图片
      }).then(res => {
        if (res.code !== 0) {
          // 如果更新失败，回显原来的状态
          row.type = row.type === 1 ? 0 : 1;
          this.$message.error(res.msg);
        } else {
          // 更新成功，可以在这里进行其他操作，比如通知用户
          this.$message.success('类型更新成功');
        }
      }).catch(error => {
        // 如果请求失败，回显原来的状态
        row.type = row.type === 1 ? 0 : 1;
        this.$message.error('网络错误或服务器无响应');
      });
    },

    handleRemove(file, fileList) {
      // 删除图片时，更新fileList数组
      this.fileList = fileList;
    },
    updateStatus(row) {
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.fileList = this.form.imageUrl ? [{name: 'current-image', url: this.form.imageUrl}] : []
      // 检查fileList中是否有图片
      if (this.fileList.length === 0) {
        this.$message.error('请上传图片后再开启展示');
        // 如果没有图片，则将row.status恢复到之前的状态
        row.status = row.status === 1 ? 0 : 1;
        return; // 如果没有图片，则不执行更新操作
      }

      // 发起请求更新数据
      this.$request.put('/admin/api/activity/update', {
        id: row.id,
        status: row.status,
        imageUrl: this.fileList.length > 0 ? this.fileList[0].url : null // 只发送第一张图片
      }).then(res => {
        if (res.code !== 0) {
          // 如果更新失败，回显原来的状态
          row.status = row.status === 1 ? 0 : 1;
          this.$message.error(res.msg);
        } else {
          // 更新成功，可以在这里进行其他操作，比如通知用户
          this.$message.success('状态更新成功');
        }
      }).catch(error => {
        // 如果请求失败，回显原来的状态
        row.status = row.status === 1 ? 0 : 1;
        this.$message.error('网络错误或服务器无响应');
      });
    },
    handleAdd() {   // 新增数据
      this.form = {
        type : 0
      }  // 新增数据的时候清空数据
      this.fromVisible = true   // 打开弹窗
    },
    handleCancel(){
      this.fileList = []
      this.fromVisible = false
    },
    handleEdit(row) {   // 编辑数据
      this.fileList = []
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.fileList = this.form.imageUrl ? [{name: 'current-image', url: this.form.imageUrl}] : []
      this.fromVisible = true   // 打开弹窗
    },
    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
      // 检查fileList是否为空，如果为空，则将imageUrl设置为null
      if (this.fileList.length === 0) {
        this.form.imageUrl = null;
      }
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$request({
            url: this.form.id ? '/admin/api/activity/update' : '/admin/api/activity/add',
            method: this.form.id ? 'PUT' : 'POST',
            data: this.form
          }).then(res => {
            if (res.code === 0) {  // 表示成功保存
              this.$message.success('保存成功')
              this.load(1)
              this.fromVisible = false
            } else {
              this.$message.error(res.msg)  // 弹出错误的信息
            }
          })
        }
      })
    },
    del(id) {   // 单个删除
      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/admin/api/activity/delete/' + id).then(res => {
          if (res.code === 0) {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)
    },
    load(pageNum) {  // 分页查询
      console.log(this.status)
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/admin/api/activity/pages', {
        params: {
          current: this.pageNum,
          size: this.pageSize,
          title: this.title,
          type: this.type,
          status: this.status
        }
      }).then(res => {
        this.tableData = res.records
        console.log(this.tableData)
        this.total = res.total
      })
    },
    reset() {
      this.title = null
      this.type = null
      this.status = null
      this.load(1)
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
    handleAvatarSuccess(response, file, fileList) {
      // 定义一个正则表达式来匹配允许的文件扩展名
      const allowedExtensions = /.(png|jpg|jpeg)$/i;

      // 检查文件扩展名是否为允许的格式
      if (!allowedExtensions.test(file.name)) {
        // 如果文件扩展名不允许，从fileList中移除
        this.fileList = fileList.filter(f => f.uid !== file.uid);
        // 发出提示
        this.$message.error('只能上传png, jpg, jpeg格式的图片！');
        return; // 不进行后续操作
      }

      // 如果文件扩展名允许，更新imageUrl和fileList
      this.form.imageUrl = response.data;
      this.fileList = fileList; // 更新fileList
    },
  }
}
</script>

<style scoped>

</style>